$(function() {
    /**
     * 变量初始化
     * $uList1、2、3 -> 找到相应列表
     * timer -> 周期性触发事件的赋值结果变量
     */
    var $uList1 = $(".scroll-box-1 ul");
    var $uList2 = $(".scroll-box-2 ul");
    var $uList3 = $(".scroll-box-3 ul");
    var timer = null;

    /**
     * 周期性调用滚动动画函数scrollList
     * @param obj
     */
    function gettime(obj1,obj2,obj3) {
        timer = setInterval(function() {
                scrollList(obj1,obj2,obj3);
            },
            1000);
        // console.log(obj);
        // alert(obj)
    }

    /**
     * 三列
     */
    gettime($uList1,$uList2,$uList3);
    // gettime($uList2);
    // gettime($uList3);


    /**
     * 滚动动画函数
     * @param obj
     */
    function scrollList(obj1,obj2,obj3) {
        //console.log(obj.);

        //获得当前<li>的高度
        var scrollHeight = $("ul li:first").height();
        //滚动出一个<li>的高度
        obj1.stop().animate({
                marginTop: -scrollHeight
            },
            600,
            function() {
                //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
                obj1.css({
                    marginTop: 0
                }).find("li:first").appendTo(obj1);
            });
        obj2.stop().animate({
                marginTop: -scrollHeight
            },
            600,
            function() {
                //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
                obj2.css({
                    marginTop: 0
                }).find("li:first").appendTo(obj2);
            });
        obj3.stop().animate({
                marginTop: -scrollHeight
            },
            600,
            function() {
                //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
                obj3.css({
                    marginTop: 0
                }).find("li:first").appendTo(obj3);
            });
    }

});
$(function() {
    /********************男女比例图************************/
    const sexchart = echarts.init(document.getElementById('sexchart'));
    var spirit = 'image://';

    var maxData = 200;

    var sexoption = {
        "title": {
            "text": "自定义象形柱图--PictorialBarCustomize",
            "left": "center",
            "y": "10",
            "textStyle": {
                "color": "#fff"
            }
        },
        "backgroundColor": "#101a3c",
        "grid": {
            "left": "20%",
            "top": "10%",
            "bottom": 10
        },
        "tooltip": {
            "trigger": "item",
            "textStyle": {
                "fontSize": 12
            },
            "formatter": "{b0}:{c0}"
        },
        "xAxis": {
            "max": 300,
            "splitLine": {
                "show": false
            },
            "axisLine": {
                "show": false
            },
            "axisLabel": {
                "show": false
            },
            "axisTick": {
                "show": false
            }
        },
        "yAxis": [
            {
                "type": "category",
                "inverse": false,
                "data": [
                    // "山西",
                    // "四川",
                    // "西藏",
                    // "北京",
                    // "上海",
                    // "内蒙古",
                    // "云南",
                    // "黑龙江",
                    "广东",
                    "江苏"
                ],
                "axisLine": {
                    "show": false
                },
                "axisTick": {
                    "show": false
                },
                "axisLabel": {
                    "margin": -4,
                    "textStyle": {
                        "color": "#fff",
                        "fontSize": 16.25
                    }
                }
            },

        ],
        "series": [
            {
                "type": "pictorialBar",
                "symbol": "image://",
                "symbolRepeat": "fixed",
                "symbolMargin": "5%",
                "symbolClip": true,
                "symbolSize": 22.5,
                "symbolPosition": "start",
                "symbolOffset": [
                    20,
                    0
                ],
                "symbolBoundingData": 300,
                "data": [

                    // 67,
                    // 81,
                    // 86,
                    // 94,
                    // 166,
                    // 220,
                    249,
                    262
                ],
                "z": 10
            },
            {
                "type": "pictorialBar",
                "itemStyle": {
                    "normal": {
                        "opacity": 0.3
                    }
                },
                "label": {
                    "normal": {
                        "show": false
                    }
                },
                "animationDuration": 0,
                "symbolRepeat": "fixed",
                "symbolMargin": "5%",
                "symbol": "image://",
                "symbolSize": 22.5,
                "symbolBoundingData": 300,
                "symbolPosition": "start",
                "symbolOffset": [
                    20,
                    0
                ],
                "data": [
                    13,
                    42,
                    67,
                    81,
                    86,
                    94,
                    166,
                    220,
                    249,
                    262
                ],
                "z": 5
            }
        ]
    };


// Make dynamic data.
    function random() {
        return +(Math.random() * (maxData - 10)).toFixed(1);
    }
    setInterval(function () {
        var dynamicData = [random(), random(), random(), random(),random(), random(), random(), random(),random(),random()];
        sexchart.setOption({
            series: [{
                data: dynamicData.slice()
            }, {
                data: dynamicData.slice()
            }]
        })
    }, 3000)
    sexchart.setOption(sexoption);
    window.onresize = function() {    //当窗口改变时，自动调整图表大小，自适应
        sexchart.resize();

    }
});

/***
 * 商品订单销量地图
 * @param _
 * @returns {*}
 */

window.onload = _ => {
    let data = [
        {name: '鄂尔多斯', value: 12},
        {name: '招远', value: 12},
        {name: '舟山', value: 12},
        {name: '齐齐哈尔', value: 14},
        {name: '大庆', value: 27},
        {name: '承德', value: 25},
        {name: '厦门', value: 26},
        {name: '汕尾', value: 26},
        {name: '潮州', value: 26},
        {name: '丹东', value: 27},
        {name: '太仓', value: 27},
        {name: '曲靖', value: 27},
        {name: '烟台', value: 28},
        {name: '福州', value: 29},
        {name: '渭南', value: 72},
        {name: '宝鸡', value: 72},
        {name: '焦作', value: 75},
        {name: '北京', value: 79},
        {name: '徐州', value: 79},
        {name: '衡水', value: 80},
        {name: '包头', value: 80},
        {name: '绵阳', value: 80},
        {name: '乌鲁木齐', value: 84},
        {name: '枣庄', value: 84}
    ];
    let geoCoordMap = {
        '海门': [121.15, 31.89],
        '鄂尔多斯': [109.781327, 39.608266],
        '招远': [120.38, 37.35],
        '舟山': [122.207216, 29.985295],
        '齐齐哈尔': [123.97, 47.33],
        '盐城': [120.13, 33.38],
        '赤峰': [118.87, 42.28],
        '青岛': [120.33, 36.07],
        '乳山': [121.52, 36.89],
        '金昌': [102.188043, 38.520089],
        '泉州': [118.58, 24.93],
        '莱西': [120.53, 36.86],
        '日照': [119.46, 35.42],
        '胶南': [119.97, 35.88],
        '南通': [121.05, 32.08],
        '拉萨': [91.11, 29.97],
        '云浮': [112.02, 22.93],
        '梅州': [116.1, 24.55],
        '文登': [122.05, 37.2],
        '上海': [121.48, 31.22],
        '攀枝花': [101.718637, 26.582347],
        '威海': [122.1, 37.5],
        '承德': [117.93, 40.97],
        '厦门': [118.1, 24.46],
        '汕尾': [115.375279, 22.786211],
        '潮州': [116.63, 23.68],
        '丹东': [124.37, 40.13],
        '太仓': [121.1, 31.45],
        '曲靖': [103.79, 25.51],
        '烟台': [121.39, 37.52],
        '福州': [119.3, 26.08],
        '瓦房店': [121.979603, 39.627114],
        '即墨': [120.45, 36.38],
        '抚顺': [123.97, 41.97],
        '玉溪': [102.52, 24.35],
        '张家口': [114.87, 40.82],
        '阳泉': [113.57, 37.85],
        '莱州': [119.942327, 37.177017],
        '湖州': [120.1, 30.86],
        '汕头': [116.69, 23.39],
        '昆山': [120.95, 31.39],
        '宁波': [121.56, 29.86],
        '湛江': [110.359377, 21.270708],
        '揭阳': [116.35, 23.55],
        '荣成': [122.41, 37.16],
        '连云港': [119.16, 34.59],
        '葫芦岛': [120.836932, 40.711052],
        '常熟': [120.74, 31.64],
        '东莞': [113.75, 23.04],
        '河源': [114.68, 23.73],
        '淮安': [119.15, 33.5],
        '泰州': [119.9, 32.49],
        '南宁': [108.33, 22.84],
        '营口': [122.18, 40.65],
        '惠州': [114.4, 23.09],
        '江阴': [120.26, 31.91],
        '蓬莱': [120.75, 37.8],
        '韶关': [113.62, 24.84],
        '嘉峪关': [98.289152, 39.77313],
        '广州': [113.23, 23.16],
        '延安': [109.47, 36.6],
        '太原': [112.53, 37.87],
        '清远': [113.01, 23.7],
        '中山': [113.38, 22.52],
        '昆明': [102.73, 25.04],
        '寿光': [118.73, 36.86],
        '盘锦': [122.070714, 41.119997],
        '长治': [113.08, 36.18],
        '深圳': [114.07, 22.62],
        '珠海': [113.52, 22.3],
        '宿迁': [118.3, 33.96],
        '咸阳': [108.72, 34.36],
        '铜川': [109.11, 35.09],
        '平度': [119.97, 36.77],
        '佛山': [113.11, 23.05],
        '海口': [110.35, 20.02],
        '江门': [113.06, 22.61],
        '章丘': [117.53, 36.72],
        '肇庆': [112.44, 23.05],
        '大连': [121.62, 38.92],
        '临汾': [111.5, 36.08],
        '吴江': [120.63, 31.16],
        '石嘴山': [106.39, 39.04],
        '沈阳': [123.38, 41.8],
        '苏州': [120.62, 31.32],
        '茂名': [110.88, 21.68],
        '嘉兴': [120.76, 30.77],
        '长春': [125.35, 43.88],
        '胶州': [120.03336, 36.264622],
        '银川': [106.27, 38.47],
        '张家港': [120.555821, 31.875428],
        '三门峡': [111.19, 34.76],
        '锦州': [121.15, 41.13],
        '南昌': [115.89, 28.68],
        '柳州': [109.4, 24.33],
        '三亚': [109.511909, 18.252847],
        '自贡': [104.778442, 29.33903],
        '吉林': [126.57, 43.87],
        '阳江': [111.95, 21.85],
        '泸州': [105.39, 28.91],
        '西宁': [101.74, 36.56],
        '宜宾': [104.56, 29.77],
        '呼和浩特': [111.65, 40.82],
        '成都': [104.06, 30.67],
        '大同': [113.3, 40.12],
        '镇江': [119.44, 32.2],
        '桂林': [110.28, 25.29],
        '张家界': [110.479191, 29.117096],
        '宜兴': [119.82, 31.36],
        '北海': [109.12, 21.49],
        '西安': [108.95, 34.27],
        '金坛': [119.56, 31.74],
        '东营': [118.49, 37.46],
        '牡丹江': [129.58, 44.6],
        '遵义': [106.9, 27.7],
        '绍兴': [120.58, 30.01],
        '扬州': [119.42, 32.39],
        '常州': [119.95, 31.79],
        '潍坊': [119.1, 36.62],
        '重庆': [106.54, 29.59],
        '台州': [121.420757, 28.656386],
        '南京': [118.78, 32.04],
        '滨州': [118.03, 37.36],
        '贵阳': [106.71, 26.57],
        '无锡': [120.29, 31.59],
        '本溪': [123.73, 41.3],
        '克拉玛依': [84.77, 45.59],
        '渭南': [109.5, 34.52],
        '马鞍山': [118.48, 31.56],
        '宝鸡': [107.15, 34.38],
        '焦作': [113.21, 35.24],
        '句容': [119.16, 31.95],
        '北京': [116.46, 39.92],
        '徐州': [117.2, 34.26],
        '衡水': [115.72, 37.72],
        '包头': [110, 40.58],
        '绵阳': [104.73, 31.48],
        '乌鲁木齐': [87.68, 43.77],
        '枣庄': [117.57, 34.86],
        '杭州': [120.19, 30.26],
        '淄博': [118.05, 36.78],
        '鞍山': [122.85, 41.12],
        '溧阳': [119.48, 31.43],
        '库尔勒': [86.06, 41.68],
        '安阳': [114.35, 36.1],
        '开封': [114.35, 34.79],
        '济南': [117, 36.65],
        '德阳': [104.37, 31.13],
        '温州': [120.65, 28.01],
        '九江': [115.97, 29.71],
        '邯郸': [114.47, 36.6],
        '临安': [119.72, 30.23],
        '兰州': [103.73, 36.03],
        '沧州': [116.83, 38.33],
        '临沂': [118.35, 35.05],
        '南充': [106.110698, 30.837793],
        '天津': [117.2, 39.13],
        '富阳': [119.95, 30.07],
        '泰安': [117.13, 36.18],
        '诸暨': [120.23, 29.71],
        '郑州': [113.65, 34.76],
        '哈尔滨': [126.63, 45.75],
        '聊城': [115.97, 36.45],
        '芜湖': [118.38, 31.33],
        '唐山': [118.02, 39.63],
        '平顶山': [113.29, 33.75],
        '邢台': [114.48, 37.05],
        '德州': [116.29, 37.45],
        '济宁': [116.59, 35.38],
        '荆州': [112.239741, 30.335165],
        '宜昌': [111.3, 30.7],
        '义乌': [120.06, 29.32],
        '丽水': [119.92, 28.45],
        '洛阳': [112.44, 34.7],
        '秦皇岛': [119.57, 39.95],
        '株洲': [113.16, 27.83],
        '石家庄': [114.48, 38.03],
        '莱芜': [117.67, 36.19],
        '常德': [111.69, 29.05],
        '保定': [115.48, 38.85],
        '湘潭': [112.91, 27.87],
        '金华': [119.64, 29.12],
        '岳阳': [113.09, 29.37],
        '长沙': [113, 28.21],
        '衢州': [118.88, 28.97],
        '廊坊': [116.7, 39.53],
        '菏泽': [115.480656, 35.23375],
        '合肥': [117.27, 31.86],
        '武汉': [114.31, 30.52],
        '大庆': [125.03, 46.58]
    };
    let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    // const piechart = echarts.init(document.getElementById('piechart'));
    let box = document.getElementById('EC')
    let EC = echarts.init(box)
    let myTooltip = new myTooltipC('EC')
    let op = {
        title: {
            top: 20,
            // text: '引导线tooltip轮播动画效果',
            // subtext: '说明：打开页面3秒后开始自动轮播；鼠标移动停止轮播，静置2秒再次播放',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        // backgroundColor: '#404a59',
        tooltip: {
            trigger: 'item',
            triggerOn: 'click',
            backgroundColor: 'transparent',
            position(pos) {
                let position = myTooltip.getPosOrSize('pos', pos)
                return position
            },
            formatter(params) {
                let text = `地点：${params.name}\n数量：${params.value[2]}`
                let tooltipDom = myTooltip.getTooltipDom(text)
                return tooltipDom
            }
        },
        legend: {
            show: false
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#101f32',
                    borderWidth: 1.1,
                    borderColor: '#43d0d6'
                },
                emphasis: {
                    areaColor: '#069'
                }
            }
        },
        series: [
            {
                name: 'Tooltip Test',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function (val) {
                    return val[2] / 5;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    }
    EC.setOption(op, true)

    let timer = null
    const autoPlay = _ => {
        let index = 0
        if (timer) clearInterval(timer)
        timer = setInterval(_ => {
            EC.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index
            })
            index++
            if (index >= data.length) {
                index = 0
            }
        }, 3000)
    }
    autoPlay()
    let delay = null
    box.addEventListener('mousemove', e => {
        if (delay) clearTimeout(delay)
        if (timer) clearInterval(timer)
        delay = setTimeout(_ => {
            autoPlay()
        }, 2000)
    })
}
